<template>
  <div class="boxer-school">
        <li class="lesson-title"  v-for="(item, index) of list" :key="index">
          <span :data-key="item.name" :data-url="item.url" :data-type="item.type" :data-name="item.name" :data-isDir="item.isDir" :data-cat="item.key" @click="view">
            <img v-if="item.type === 'doc' || item.type === 'docx'"
                 src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon-doc.png">
              <img v-if="item.type === 'ppt' || item.type === 'pptx'"
                   src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon-ppt.png">
              <img v-if="item.type === 'png'"
                   src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon-jpg.png">
              <img v-if="item.type === 'mp4'"
                   src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon-video.png">
              <img v-if="item.type === 'pdf'"
                   src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon_pdf.png">
              <img v-if="item.type === 'mp3'"
                   src="https://figo-online.oss-cn-beijing.aliyuncs.com/fzdg_temppic/icon-voice.png">
            {{item.name}}
          </span>
          <div v-if="item.isDir === 'true'">
            <list></list>
          </div>
        </li>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      lessonList: [],
      cat: '',
      name: '',
      mutableList: [...this.list]
    }
  },
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    // selfList: {
    //   get () {
    //     return this.list.slice()
    //   },
    //   set (val) {
    //     this.$emit('change-list', val)
    //   }
    // }
  },
  mounted () {
  },
  components: {
  },
  methods: {
    // 用户标识
    getToken () {
      this.token = this.$store.state.token
      console.log('当前用户标识', this.token)
    },
    view  (e) {
      let type = e.target.dataset.type
      let url = e.target.dataset.url
      this.name = e.target.dataset.name
      this.cat = e.target.dataset.cat
      let isDir = e.target.dataset.isdir
      // let baseUrl = 'https://view.officeapps.live.com/op/view.aspx?src='
      let allUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + url
      console.log('类型为', e.target.dataset)
      console.log('文件地址', url)
      console.log('是否目录', isDir, this.cat)
      if (isDir === 'true') {
        console.log('是目录', this.cat)
        this.$emit('category', this.cat)
        // this.getClassList()
      } else {
        if (type === 'pdf') {
          window.open(url, '_self')
        } else if (type === 'mp4') {
          let playPara = {
            url: url,
            name: name
          }
          localStorage.setItem('playParaData', JSON.stringify(playPara))
          console.log('video url is', url)
          this.$router.push({name: 'videoPlay', params: {}})
          console.log('播放参数', JSON.parse(localStorage.getItem('playParaData')))
        } else if (type === 'doc' || type === 'docx' || type === 'xls' || type === 'xlsx' || type === 'ppt' || type === 'pptx') {
          window.open(allUrl, '_blank')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~css/fglz.scss";
.boxer-school{
  @include container-width-height(100%,auto);
  .top-pic{
    @include container-width-height(100%,140px);
    margin-top: 0px;
    .mint-swipe{
      .mint-swipe-indicators{
        .mint-swipe-indicator{
          background: $color-green-item1;
          &.is-active{
            background: $color-gray-item;
          }
        }
      }
    }
    img{
      display: block;
      @include container-width-height(100%,auto);
    }
  }
  .lesson-category{
    @include container-width-height(100%,auto);
    .category{
      /*flex: 1;*/
      @include container-width-height(25%,auto);
    }
    .lesson-boxer{
      @include container-width-height(100%,auto);
      @include text-variant(20px,$brand-white,center);
      .lesson-title{
        box-sizing: border-box;
        display: block;
        @include container-width-height(100%,auto);
        @include text-variant(14px,$color-gray-item2,left);
        border-bottom: 1px solid #e2e2e2;
        padding: 5px 10px;
        margin-top: 10px;
        >span{
          @include text-variant(14px,$color-gray-item2,left);
          >img{
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
.lesson-list-name{
  @include container-width-height(100%,auto);
  @include text-variant(14px,$brand-black,left);
  color: #333333;
  background: #a8d6e3;
  padding: 10px 8px;
  margin: 5px 0;
}
</style>
